<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-21 13:36:41
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\components\uiFormItem.vue
 * CIMC-V2
-->
<template>
  <el-form-item v-if="formId" class="pr-1" :label-width="info.extension.labelWidth?.value + 'px'" :prop="info.extension.model.value">
    <template #label>
      <span>
        {{ info.extension.label.value || '' }}
      </span>
      <span class="text-yellow-600">
        <el-tooltip v-if="info.extension.tooltip && info.extension.tooltip.value" class="box-item" effect="dark" placement="top">
          <template #content>
            <pre v-dompurify-html="info.extension.tooltip.value || ''"></pre>
          </template>
          <vui-icon class="ml-1" icon="question-fill" />
        </el-tooltip>
      </span>
    </template>
    <template #default>
      <div :style="{ width: `${info.extension.width?.value}px` }"><slot></slot></div>
    </template>
  </el-form-item>
  <div v-else class="mt-[2px]">
    <div
      class="ui-input flex"
      :style="{
        width: `${info.extension.width?.value}px`,
      }"
    >
      <label
        class="flex flex-none justify-end items-center text-right text-xs text-gray-500 pr-[10px] pl-1"
        :style="{
          width: `${info.extension.labelWidth?.value}px`,
        }"
      >
        {{ info.extension.label.value }}
        <span class="text-yellow-600">
          <el-tooltip v-if="info.extension.tooltip && info.extension.tooltip.value" class="box-item" effect="dark" placement="top">
            <template #content>
              <div v-dompurify-html="info.extension.tooltip.value || ''"></div>
            </template>
            <vui-icon class="ml-1" icon="question-fill" />
          </el-tooltip>
        </span>
      </label>
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'UiFormItem',
    mixins: [],
    inject: {
      formId: { default: '' },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    computed: {},
    created() {},
  })
</script>
